<!--园区详情-->
<template>
  <div class="parkDetialContainer">
    <!-- 面包屑 -->
    <div class="bread f">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> 首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/park' }">园区</el-breadcrumb-item>
        <el-breadcrumb-item>园区详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 联系我们 -->
    <div class="oneDiv">
      <p class="name">{{ list.name }}</p>
      <p class="address">
        {{ list.address }}
      </p>
      <div class="cont f fb">
        <!-- 左边切换图片 -->
        <div class="left">
          <div class="left_top">
            <el-image
              class="leftimg"
              :src="systemBaseUrl + list.prakIndexImg"
              fit="cover"
            ></el-image>
          </div>
          <swiper :options="swiperOption" ref="mySwiper" class="left_ul">
            <swiper-slide
              class="left_li"
              v-for="(item, index) in list.parkInfoImg"
              :key="index"
            >
              <el-image
                @click="changeImg(item.imgUrl)"
                class="leftimg"
                :src="systemBaseUrl + item.imgUrl"
                fit="cover"
              ></el-image>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
        <div class="right">
          <p class="title">联系我们</p>
          <div class="concat f">
            <div class="mapid" id="mapContainer"></div>
            <div class="info">
              <div class="baseinfo f">
                <p class="left f fc">
                  <el-image
                    lazy
                    src="../../static/images/bbi/email.png"
                    fit="cover"
                    class="icon"
                  ></el-image>
                </p>
                <p class="text">yangyang@bbi.com.cn/wenxu@bbi.com.cn</p>
              </div>
              <div class="baseinfo f">
                <p class="left f fc">
                  <el-image
                    lazy
                    src="../../static/images/bbi/tel.png"
                    fit="cover"
                    class="icon"
                  ></el-image>
                </p>
                <p class="text">01082316255/82338204</p>
              </div>
              <div class="baseinfo f">
                <p class="left f fc">
                  <el-image
                    lazy
                    src="../../static/images/bbi/qiye.png"
                    fit="cover"
                    class="icon"
                  ></el-image>
                </p>
                <p class="text">北京市海淀区学院路35号世宁大厦1401室</p>
              </div>
              <input type="text" placeholder="Name" class="infoInput" />
              <input type="text" placeholder="Tel" class="infoInput" />
              <textarea
                cols="30"
                rows="8"
                class="desc"
                placeholder="Note"
              ></textarea>
              <p class="infoBtn f fc">联系我们</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 空间简介 -->
    <div class="twoDiv">
      <div class="half">
        <p class="title">空间简介</p>
        <p class="desc" v-html="list.introduction"></p>
      </div>
    </div>
    <!-- 空间价格 -->
    <div class="twoDiv">
      <div class="half">
        <p class="title">空间价格</p>
        <ul class="pric_ul">
          <li class="pric_li f fb" v-for="(item, index) in 2" :key="index">
            <div class="left">
              <el-image
                class="leftimg"
                src="../../static/images/bbi/zz7.jpg"
                fit="cover"
              ></el-image>
            </div>
            <div class="right f fn fc">
              <div class="right_top f fb">
                <p class="title">专属办公室</p>
                <p class="date">¥2,478 /工位/月起</p>
              </div>
              <div class="right_bot">
                为您的品牌特别设计的办公室，容纳任 何规模的团队。可随时搬入。
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 周边位置 -->
    <div class="twoDiv">
      <div class="half">
        <p class="title">空间价格</p>
        <p class="desc">附近公交：深大地铁站，119公交，M12路公交</p>
        <div class="mapid" id="mapContainer1"></div>
      </div>
    </div>
    <!-- 服务设施 -->
    <div class="twoDiv">
      <div class="half">
        <p class="title">服务设施</p>
        <!-- 服务图片 -->
        <swiper :options="swiperOption" ref="mySwiper" class="service_ul">
          <swiper-slide
            class="service_li"
            v-for="(item, index) in 5"
            :key="index"
          >
            <el-image
              class="leftimg"
              src="../../static/images/bbi/zz11.jpg"
              fit="cover"
            ></el-image>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div v-for="(item, index) in 2" :key="index">
          <div class="commonTitle f">
            <el-image
              src="../../static/images/bbi/park1.jpg"
              fit="cover"
              class="icon"
            ></el-image>
            <span>基本设施</span>
          </div>
          <ul class="item_ul f">
            <li class="item_li" v-for="(item, index) in 8" :key="index">
              社区管理团队
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
var map
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      options: {
        title: '空间展示',
        intro:
          '为您所需提供您所选，打造您专属的办公室，还有多种活动空间，会议室，设备齐全。',
        banner: require('../../static/images/bbi/banner1.jpg')
      },
      // 服务图片
      swiperOption: {
        // 显示分页

        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        slidesPerView: 'auto',
        autoplay: 'true' // 等同于以下设置
      },
      // 地理位置
      lnglat: [116.348907, 39.985892],
      zoom: 15,
      parkId: '',
      list: {
        inputUserId: '564420a6a6384bc3b97e01bad05928cc',
        inputDate: '2019-10-07 11:59:09',
        updateUserId: '564420a6a6384bc3b97e01bad05928cc',
        updateDate: '2019-10-07 11:59:09',
        wfSubmit: 'false',
        id: '3dbed27199ed47fdb0426be61199f1fd',
        breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
        parkNo: 'PKZBYQ1910070002',
        name: '北航天汇孵化器（淄博）科创中心',
        introduction:
          '<p style="text-indent: 28px; text-align: left;">\r\n    <span style="font-family: 宋体; font-size: 14px;">北航天汇孵化器（淄博）科创中心（以下简称中心）暨淄博航智天汇科技企业孵化器有限公司，是北京北航天汇科技孵化器有限公司下设于淄博高新区的科技服务机构，依托淄博市、高新区管委会园区核心区域（仪器仪表园区）已有的办公场地，旨在打造特色的园区产业孵化基地，开展企业引进和培育工作。孵化场地占地11000平方米，其中，一期工程<span style="font-family: Calibri;">3100</span>平米，可为入驻创业者提供创业培训、创业指导和创业政策咨询服务；提供办公、研发和小规模生产所需的孵化场地以及提供成果展示、路演、商务洽谈、会务等场所服务；引进、协调中介服务机构入驻科创中心，为孵化企业提供工商、税务、人才招聘、法律、金融、知识产权、项目申报、资质办理、体系认证等一系列服务。</span>\r\n</p>\r\n<p style="text-align: left;">\r\n    <span style="font-size: 14px;"><span style="font-size: 12px; font-family: 宋体;">电话：</span><span style="font-family: Calibri; font-size: 14px;">15552739966</span><span style="font-family: 宋体; font-size: 14px;">&nbsp;&nbsp;<span style="font-size: 12px; font-family: 宋体;">邮箱：</span>wangnan@bbi.com.cn</span></span>\r\n</p>\r\n<p>\r\n    <br/>\r\n</p>',
        shortChName: '淄博园区',
        shortName: 'ZBYQ',
        memo: 'fdsafdsafaafds',
        sort: 2,
        provinceId: '山东省',
        cityId: '淄博市',
        areaId: '淄川区',
        address: '淄博市高新区管委会',
        status: 1,
        parkContacts: '',
        contactsPhone: '15552739966  ',
        accountNumber: '01091060100120105001595',
        openingBank: '',
        inputEmail: 'wangnan@bbi.com.cn',
        prakIndexImg: 'upload\\file\\web\\news\\zb1.jpg',
        parkInfoImg: [
          {
            wfSubmit: 'false',
            id: '006',
            breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
            parkId: '3dbed27199ed47fdb0426be61199f1fd',
            imgUrl: 'upload\\file\\web\\news\\zb1.jpg',
            sort: '1',
            status: 1
          },
          {
            wfSubmit: 'false',
            id: '007',
            breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
            parkId: '3dbed27199ed47fdb0426be61199f1fd',
            imgUrl: 'upload\\file\\web\\news\\zb2.jpg',
            sort: '2',
            status: 1
          },
          {
            wfSubmit: 'false',
            id: '008',
            breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
            parkId: '3dbed27199ed47fdb0426be61199f1fd',
            imgUrl: 'upload\\file\\web\\news\\zb3.jpg',
            sort: '3',
            status: 1
          },
          {
            wfSubmit: 'false',
            id: '009',
            breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
            parkId: '3dbed27199ed47fdb0426be61199f1fd',
            imgUrl: 'upload\\file\\web\\news\\zb4.jpg',
            sort: '4',
            status: 1
          },
          {
            wfSubmit: 'false',
            id: '010',
            breedId: '15d6298f1b864b61bbd1ffa43ac0d9ad',
            parkId: '3dbed27199ed47fdb0426be61199f1fd',
            imgUrl: 'upload\\file\\web\\news\\zb5.jpg',
            sort: '5',
            status: 1
          }
        ]
      }
    }
  },
  mounted () {
    this.parkId = this.$route.query.parkId
    console.log(this.parkId)
    this.searchAddressMethod()
  },
  methods: {
    // 地理位置
    searchAddressMethod () {
      const self = this
      AMap.plugin(
        [
          'AMap.CitySearch',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.Geocoder',
          'AMap.ToolBar'
        ],
        function () {
          // 搜索插件
          var placeSearch
          // 初始化地图 begin
          map = new AMap.Map('mapContainer1', {
            resizeEnable: true,
            zoom: self.zoom, // 地图显示的缩放级别
            keyboardEnable: false
          })
          map.setCenter(self.lnglat)
        }
      )
    },
    // 切换图片
    changeImg (img) {
      this.list.prakIndexImg = img
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/common.scss";
@import "../assets/css/main.scss";
</style>
